<template>
  <div id='wrap'>
    <h1>侦听器watchEffect</h1>
    <p>inputValue:<input type="text" v-model="inputVal"></p>
    <hr>
    <p>
        <label for="">num1:</label>
        <input type="text" v-model="num1">
        <label for="">num2:</label>
        <input type="text" v-model="num2">
    </p>
    <button>求和:{{ sumNum }}</button>
    <hr>
    <p>
        <input type="text" v-model="ruser.name">
        <input type="text" v-model="ruser.sex">
        <input type="text" v-model="ruser.love.hobby">
    </p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu12',
}
</script>

<script lang='ts' setup>
import { ref,reactive,watch,watchEffect,computed } from 'vue'
const num1=ref(0)
const num2=ref(0)
const inputVal=ref('默认值')
const ruser =reactive({
    name:'鸡坤',
    sex:'男',
    love:{
        hobby:'唱,跳,rap'
    }
})
// watch(inputVal,(newValue,oldValue)=>{
//     console.log(`新值:${newValue},旧值:${oldValue}`);
// })
// watchEffect(()=>{
//     console.log(`新监听器监听的数据:${inputVal.value}`);
// })
const sumNum=computed(()=>{
    return num1.value + num2.value
})
// watch(sumNum,(newValue,oldValue)=>{
//     console.log(`新值:${newValue},旧值：${oldValue}`);
// })
// watchEffect(()=>{
//     console.log(`新监听器监听的数据:${sumNum.value}`);
// })
// watch(
//     ()=>inputVal.value,
//     (newValue,oldValue)=>{
//         console.log(newValue,'getter:newVal');
//         console.log(oldValue,'getter:oldVal');
//     }
// )
// watchEffect(()=>{
//     console.log((()=>inputVal.value)());
// })
// watch(
//     ()=>num1.value * num2.value,
//     (newValue,oldValue)=>{
//         console.log(`求和新值:${newValue} ; 求和旧值:${oldValue}`);
//     }
// )
// watchEffect(()=>{
//     const sum=(()=>num1.value*num2.value)()
//     console.log(sum);
// })
// watch(
//     [inputVal,()=>num1.value*num2.value,()=>inputVal.value,()=>num1.value+num2.value],
//     ([a1,b1,c1,d1],[a2,b2,c2,d2])=>{
//         console.log(a1,a2);
//         console.log(b1,b2);
//         console.log(c1,c2);
//         console.log(d1,d2);
//     }
// )
// watchEffect(()=>{
//     const [inputVal1,ride,iptVal,sum]=[inputVal,(()=>num1.value*num2.value)(),(()=>inputVal.value)(),(()=>num1.value+num2.value)()]
//     console.log(inputVal1.value,ride,iptVal,sum);
// })
// watch(()=>ruser.name,(newValue,oldValue)=>{
//     console.log(`新值:${newValue},旧值:${oldValue}`);
// })
// watchEffect(()=>{
//     console.log((()=>ruser.name)());
// })
watch(
    ()=>ruser.love.hobby as string,
    (newValue,oldValue)=>{
        console.log(`新值:${newValue},旧值:${oldValue}`);
    },
    {
        deep:true,
        immediate:true,
        once:true
    }
)
</script>

<style scoped lang='scss'>

</style>